<template>
  <div class="app-container">
    <YxhyTableQuery
      ref="yxhyTableQueryRef"
      :should-clear-button="true"
      :query-params.sync="queryParams"
      :query-columns="queryColumns"
      @search="handleQuery"
    >
      <el-form-item slot="button">
        <el-button v-hasPermi="['video:library:add']" type="success" @click="handleAdd">添加短剧</el-button>
      </el-form-item>
    </YxhyTableQuery>

    <YxhyTableData :columns="columns" :data="tableList" :loading="loading">
      <!-- 封面图插槽 -->
      <template #cover>
        <el-table-column label="封面" align="center" width="130">
          <template slot-scope="{ row }">
            <el-image
              :src="row.cover"
              :preview-src-list="[row.cover]"
              fit="fill"
            />
          </template>
        </el-table-column>
      </template>
      <!-- 剧集插槽 -->
      <template #episode>
        <el-table-column label="剧集" align="center" width="100">
          <template slot-scope="{ row }">
            <p class="font-color-td">总集数：{{ row.total_plot_num }}</p>
            <p class="font-color-td">已更新：{{ row.update_plot_num }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 添加时间插槽 -->
      <template #created_at>
        <el-table-column label="添加时间" align="center" :width="columnDateTimeWidth()">
          <template slot-scope="{ row }">
            <p class="font-color-td width-create-time">{{ row.created_at }}</p>
          </template>
        </el-table-column>
      </template>
      <!-- 插槽内容 -->
      <template #action>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <div class="table-action-panel">
              <el-button v-hasPermi="['video:library:edit']" type="success" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button v-hasPermi="['video:library:detail']" type="primary" size="mini" @click="handleDetail(scope.row)">剧集</el-button>
              <el-button v-hasPermi="['video:library:delete']" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </YxhyTableData>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryPage.pageNum"
      :limit.sync="queryPage.limit"
      @pagination="queryListLibraryFn"
    />

  </div>
</template>

<script>
import {
  queryListLibrary,
  delLibrary,
  IS_END,
  IS_PUBLISH
} from '@/api/video/library.js'
import { queryListClassify } from '@/api/config/classify.js'
import { queryListCopyright } from '@/api/miniProgram/copyright.js'
import { columnsStatic } from './Ds.js'

export default {
  name: 'LibraryList',
  data() {
    return {
      // 总条数
      total: 0,
      // 表格数据
      tableList: [],
      // 分页参数
      queryPage: {
        pageNum: 1,
        limit: 10
      },
      // 查询参数
      queryParams: {
        library_id_search: undefined,
        title_search: undefined,
        classify_search: undefined,
        is_publish_search: undefined
      },
      // 查询表单
      queryColumns: [{
        label: '',
        placeholder: '请输入短剧ID',
        type: 'input',
        param: 'library_id_search'
      }, {
        label: '',
        placeholder: '请输入短剧名称',
        type: 'input',
        param: 'title_search'
      }, {
        label: '',
        placeholder: '请选择短剧分类',
        type: 'select',
        selectOptions: [],
        param: 'classify_search'
      }, {
        label: '',
        placeholder: '请选择上架状态',
        type: 'select',
        selectOptions: [{ name: '已上架', value: 1 }, { name: '未上架', value: 2 }],
        param: 'is_publish_search'
      }],
      loading: false,
      // 表格列
      columns: columnsStatic,
      classifyDict: {},
      copyrightDict: {}
    }
  },
  async created() {
    await this.queryListClassifyFn()
    await this.queryListCopyrightFn()
    await this.queryListLibraryFn()
  },
  methods: {
    // 表格数据源
    async queryListLibraryFn() {
      this.loading = true
      const res = await queryListLibrary({
        ...this.queryPage,
        ...this.queryParams
      })
      // 处理响应
      res.data.map(e => {
        const { classify, is_end, is_publish, copyright } = e
        e.compendium = e.compendium || '-'
        e.intro = e.intro || '-'
        e.classify_text = this.classifyDict[classify]
        e.is_end_text = IS_END[is_end]
        e.is_publish_text = IS_PUBLISH[is_publish]
        e.copyright_text = this.copyrightDict[copyright] || '-'
      })
      this.tableList = res.data
      this.total = res.total
      this.loading = false
    },
    // 分类数据源
    async queryListClassifyFn() {
      const data = await queryListClassify({
        list_search: 1// 1=全部 2=启用 3=未启用
      })
      const arr = data.map(e => {
        const { title, classify_id } = e
        this.classifyDict[classify_id] = title
        return {
          name: title,
          value: classify_id
        }
      })
      this.queryColumns[2].selectOptions = arr
      this.$forceUpdate()
    },
    // 版权数据源
    async queryListCopyrightFn() {
      const data = await queryListCopyright({
        list_search: 1// 1=全部 2=启用 3=未启用
      })
      data.map(e => {
        const { title, copyright_id } = e
        this.copyrightDict[copyright_id] = title
        return {
          name: title,
          value: copyright_id
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryPage.pageNum = 1
      this.queryListLibraryFn()
    },
    /** 清空搜索按钮操作 */
    handleClear() {
      this.$refs.yxhyTableQueryRef.onEmpty()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: '/video/library/add'
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const { library_id } = row
      this.$tab.openPage('修改短剧库', '/video/library/add', {
        library_id
      })
    },
    /** 剧集按钮操作 */
    async handleDetail(row) {
      const { library_id } = row
      await this.$router.push({
        path: '/video/library/detail',
        query: {
          library_id
        }
      })
      await this.$tab.refreshPage({
        path: '/video/library/detail',
        name: 'LibraryDetail',
        query: {
          library_id
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const { library_id } = row
      this.$modal.confirm('确认删除吗？').then(function() {
      }).then(() => {
        delLibrary({
          library_id: library_id
        }).then(() => {
          this.$modal.msgSuccess('删除成功')
          this.handleQuery()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  .item-panel {
    width: 32%;
    background-color: #f8f8f8;
    padding: 10px;
    margin-bottom: 20px;
  }
}
.item-box:after{
  content: '';
  width: 30%;
}
</style>
